<template>
  <div class="contain">
    <div class="head">
      <el-tag>客户信息表</el-tag>
      <div>
      <el-input
        class="search"
        placeholder="请输入内容"
        suffix-icon="el-icon-search"
        v-model="search"
        @keydown.native.enter="toseach"
      ></el-input>
      <el-button class="add" type="primary"  @click="adds">添加</el-button>
      </div>
    </div>
    <div class="main">
      <el-table
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        :data="tsearch.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%"
        height="520"
        max-height="720"
      >
       <el-table-column type="expand">
         <template slot-scope="props">
           <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="QQ服务群号:">
                <span>{{ props.row.Custqq}}</span>
              </el-form-item>  
              <el-form-item label="微信服务群号:">
                <span>{{ props.row.Custwechat}}</span>
              </el-form-item>
              <el-form-item label="固定电话:">
                <span>{{ props.row.Custftel}}</span>
              </el-form-item>
              <el-form-item label="手机号:">
                <span>{{ props.row.Custtel}}</span>
              </el-form-item>
              <el-form-item label="微信号:">
                <span>{{ props.row.Custweichat}}</span>
              </el-form-item>
              <el-form-item label="QQ号:">
                <span>{{ props.row.Custtel}}</span>
              </el-form-item>
              <el-form-item label="系统名称:">
                <span>{{ props.row.Systemname}}</span>
              </el-form-item>
              <!-- <el-form-item label="备注:">
                <span>{{ props.row.Custremark}}</span>
              </el-form-item> -->
           </el-form>
         </template>
       </el-table-column>

        <el-table-column fixed label="序号" width="50" align="center">
           <template  slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}} </span></template>
        </el-table-column>
        <!-- <el-table-column prop="Custcode" label="学校代码" width="120" align="center"></el-table-column> -->
        <el-table-column prop="Custschool" label="学校" :label-width="formLabelWidth"> </el-table-column>
        <el-table-column prop="Custarea" label="地区" :label-width="formLabelWidth"></el-table-column>
        <!-- <el-table-column prop="Custqq" label="QQ服务群号" width="150" align="center"> </el-table-column>
        <el-table-column prop="Custwechat" label="微信服务群号" width="150" align="center"></el-table-column> -->
        <el-table-column prop="Custname" label="姓名" :label-width="formLabelWidth"></el-table-column>
        <el-table-column prop="Custtype" label="类型" :label-width="formLabelWidth"> </el-table-column>
        <el-table-column prop="Custdepartment" label="部门" :label-width="formLabelWidth"></el-table-column>
        <!-- <el-table-column prop="Custftel" label="固定电话" width="150" align="center"></el-table-column>
        <el-table-column prop="Custtel" label="手机号" width="150" align="center"></el-table-column>
        <el-table-column prop="Custweichat" label="微信号" width="150" align="center"></el-table-column>
        <el-table-column prop="Custqqpos" label="QQ号" width="150" align="center"></el-table-column>-->
        <el-table-column prop="Custremark" label="备注" :label-width="formLabelWidth"></el-table-column> 
        <el-table-column fixed="right" label="操作" :label-width="formLabelWidth">
          <template slot-scope="scope">
           <el-button
               @click.native.prevent="detail(scope.$index, scope.row)"
              type="text"
              size="small"
            >编辑</el-button>
            <el-button type="text" size="small" @click="handleclickdelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footerd">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10]"
        :pageSize="pagesize"
        :current-page.sync="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

   <el-dialog class="dialog" :title='add? "添加客户信息": "修改客户信息"' :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="form" align="right" ref="form" :rules="rules">
        <!-- <el-form-item label="学校代码：" prop='Custcode'>
          <el-input v-model="form.Custcode" placeholder="请输入学校代码"></el-input>
        </el-form-item> -->
        <el-form-item label="学校：" prop='Custschool'>
          <el-input v-model="form.Custschool" placeholder="请输入学校名称"></el-input>
        </el-form-item>
        <el-form-item label="地区：" prop='Custarea'>
          <el-input v-model="form.Custarea" placeholder="请输入所在地区"></el-input>
        </el-form-item>
        <el-form-item label="QQ服务群号：" prop='Custqq'>
          <el-input v-model="form.Custqq" placeholder="请输入QQ服务群号"></el-input>
        </el-form-item>
        <el-form-item label="微信服务群号：" prop='Custwechat'>
          <el-input v-model="form.Custwechat" placeholder="请输入微信服务群号"></el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop='Custname'> 
          <el-input v-model="form.Custname" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="类型:" prop='Custtype'>
          <el-select v-model="form.Custtype" autofocus placeholder="请选择类型" > 
            <el-option label="项目负责人" value="项目负责人"></el-option>
            <el-option label="系统维护人员" value="系统维护人员"></el-option>
            <el-option label="网络员" value="网络员"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门：" prop='Custdepartment'>
          <el-input v-model="form.Custdepartment" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="固定电话：" prop='Custftel'>
          <el-input v-model="form.Custftel" placeholder="请输入固定电话"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop='Custtel'>
          <el-input v-model="form.Custtel" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="微信号：" prop='Custweichat'>
          <el-input v-model="form.Custweichat" placeholder="请输入微信号"></el-input>
        </el-form-item>
        <el-form-item label="QQ号：" prop='Custqqpos'>
          <el-input v-model="form.Custqqpos" placeholder="请输入QQ号"></el-input>
        </el-form-item>
        <el-form-item label="系统" prop="develoId">
           <el-select v-model="form.Systemname" placeholder="请选择系统">
        <el-option
        v-for="item in Systemname"
        :key="item"
        :label="item"
        :value="item">
    </el-option>
      </el-select>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.Custremark" placeholder="请添加你所需要的备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="add">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">添 加</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit(form)">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCustomers, addCustomer, removeCustomer, updateCustomer,getSystems} from '@/api/customer'


export default {
  data() {
    return {
      search: "",
      currentPage: 1,
      pagesize:10,
      total: 0,
      dialogFormVisible: false,
      loading: true,
      add: false,
      formLabelWidth: "120px",
      form: {},
      data: [],
      searchData: [],
      Systemname:[],
      rules: {
        Custcode: [{ required:true, message:"请输入学校编码",trigger:"blur"}],
        Custschool: [{ required: true, message: "请输入学校名称", trigger: "blur" }],
        Custarea: [{ required: true, message: "请输入所在地区", trigger: "blur" }],
        Custqq: [{ required: true, message: "请输入QQ服务群号", trigger: "blur" }],
        Custwechat: [{ required: true, message: "请输入微信服务群号", trigger: "blur" }],
        Custname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        Custtype: [{ required: true, message: "请输入选择类型", trigger: "blur" }],
        Custdepartment: [{ required: true, message: "请输入部门", trigger: "blur" }],
        Custftel: [{ required: true, message: "请输入固定电话", trigger: "blur" }],
        Custtel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        Custweichat: [{ required: true, message: "请输入微信号", trigger: "blur" }],
        Custqqpos: [{ required: true, message: "请输入QQ号", trigger: "blur" }],
        Custremark: [{}]

      }
    };
  },
  mounted() {
   this.getdata();
    this.getdata1();
  },
  watch:{
    tsearch(val){
      this.total = val.length
    }
  },
  computed:{
    tsearch() {
      var search = this.search
      if(search) {
        return this.data.filter(data=>{
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().match(search)
          })
        })
        
      }
      
      return this.data
    }
  },
  methods: {
    getdata() {
      let data = async () => {
        try {
          let result = await getCustomers()
        console.log(result)
          if (result) {
            this.data = result
            this.loading=false
          }
        } catch (err) {
          console.log(err)
        }
      }
      data()
    },
      getdata1() {
      let data = async () => {
        try {
          let result = await getSystems()

          if (result) {

            for(var i = 0;i<result.length;i++){
              this.Systemname.push(result[i].Syname)
            }

          }
        } catch (err) {
          console.log(err)
        }
      }
      data()
    },
    //搜索数据
    tosearch() {
       let search = this.search
       let searchData = this.data
       if(search == '') {
         this.$message.error('搜索内容不能为空')
         return
       } 
      
       var data = searchData.filter(data=>{
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().match(search)
          })
        })
        this.data= data
       return data
    },
    adds() {
      this.dialogFormVisible = true;
      this.form = {};
      this.add = true;
    },
    detail(index, item) {
      this.dialogFormVisible = true;
      this.form = item;
      this.add = false;
      // console.log(index, item);
    },
    //修改数据
     edit(item) {
    console.log(item)
      this.$confirm("是否修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async() => {
          this.dialogFormVisible = false;
          let res = await updateCustomer(item)
          this.$message({
            type: "success",
            message: "修改成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消添加"
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val
      console.log(this.data)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
       this.currentPage = val
    },
//删除数据
    handleclickdelete (row) {
      this.$confirm('此操作将删此用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let remove = async () => {
          try {
             await removeCustomer(row.CustformId)
          } catch (err) {
            console.log(err)
          }
        } 
        remove()
        let index = this.data.findIndex(item => {
          return item === row
        })
        this.data.splice(index, 1)
        // this.list = this.data
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.dialogFormVisible = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

//添加数据
    confirm() {
      console.log(this.form)
      this.$confirm("是否添加?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async() => {
          let res = await addCustomer(this.form)
          console.log(res.data.CustformId)
          this.dialogFormVisible = false;
          this.data.push(res.data);
          this.form = {};
          this.$message({
            type: "success",
            message: "添加成功!"
          });
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消添加"
          });
        });
    }
  }
};
</script>


<style scoped>
.contain {
  padding: 20px;
}
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head .search {
  width: 70%;
}
.el-input {
  width: 300px;
}
.main {
  width: 100%;
  height: 100%;
}

.footerd {
  margin-top: 20px;
  float: right;
}
</style>